<template>
  <div :style="bottomStaySpace()" class="wrap">
    <div class="form_list_has_title">
      <div class="form_part">
        <div v-if="holdMainBodyType === 0" class="form_title">{{ holdMainBodyInfo.studioName }}</div>
        <div v-else class="form_title">{{ holdMainBodyInfo.name }}</div>
        <div class="flex_sb_cen">
          <div class="form_name">统一信用代码：</div>
          <div class="form_text">{{ holdMainBodyInfo.creditCode }}</div>
        </div>
        <div class="flex_sb_cen">
          <div class="form_name">法人姓名：</div>
          <div class="form_text">{{ holdMainBodyInfo.legalPersonName }}</div>
        </div>
        <div class="flex_sb_cen">
          <div class="form_name">营业执照：</div>
          <div :style="{ background: `url('https://img2.shoudaozi.com/${holdMainBodyInfo.businessLicense}') no-repeat center /contain`,width:'80rpx',height:'80rpx',marginBottom: '28rpx'}" />
        </div>
        <template v-if="holdMainBodyType === 0">
          <div class="flex_sb_cen">
            <div class="form_name">注册地：</div>
            <div class="form_text">{{ holdMainBodyInfo.studioAreaName }}</div>
          </div>
          <div class="flex_sb_cen">
            <div class="form_name">授权时间：</div>
            <div class="form_text">{{ holdMainBodyInfo.createdTime }}</div>
          </div>
          <div class="flex_sb_start">
            <div class="form_name">经营范围：</div>
            <div class="form_text" style="text-align: left">{{ holdMainBodyInfo.scope }}</div>
          </div>
        </template>
        <template v-else>
          <div class="flex_sb_cen">
            <div class="form_name">门头门店照片：</div>
            <div class="flex_sb_cen">
              <div v-for="item in holdMainBodyInfo.storePic" :key="item" class="ml10" style="margin-bottom: 28rpx">
                <Image :name="item" overspread size="80" />
              </div>
            </div>
          </div>
          <div class="flex_sb_cen">
            <div class="form_name">证明材料：</div>
            <div class="flex_sb_cen">
              <div v-for="item in holdMainBodyInfo.certificationPic" :key="item" class="ml10" style="margin-bottom: 28rpx">
                <Image :name="item" overspread size="80" />
              </div>
            </div>
          </div>
          <div class="flex_sb_cen">
            <div class="form_name">授权书：</div>
            <div class="flex_sb_cen">
              <div v-for="item in holdMainBodyInfo.authPic" :key="item" class="ml10" style="margin-bottom: 28rpx">
                <Image :name="item" overspread size="80" />
              </div>
            </div>
          </div>
          <div class="flex_sb_cen">
            <div class="form_name">新增时间：</div>
            <div class="form_text">{{ holdMainBodyInfo.createdTime }}</div>
          </div><div class="flex_sb_cen">
            <div class="form_name">审核状态：</div>
            <div :style="{color: statusName.color}" class="form_text">{{ statusName.text }}</div>
          </div>
          <div class="flex_sb_cen">
            <div class="form_name">{{ holdMainBodyInfo.isBind === false ? '解绑时间': '审核时间' }}：</div>
            <div class="form_text">{{ holdMainBodyInfo.isBind === false ? holdMainBodyInfo.unBindTime : holdMainBodyInfo.auditTime }}</div>
          </div>
        </template>
      </div>
    </div>
    <div class="form_list_has_title">
      <div class="form_part">
        <div class="form_title">法人信息</div>
        <div class="flex_sb_cen">
          <div class="form_name">法人姓名：</div>
          <div class="form_text">{{ holdMainBodyInfo.legalPersonName || '--' }}</div>
        </div>
        <div class="flex_sb_cen">
          <div class="form_name">证件类型：</div>
          <div class="form_text">{{ cardType || '--' }}</div>
        </div>
        <div class="flex_sb_cen">
          <div class="form_name">证件号码：</div>
          <div class="form_text">{{ holdMainBodyInfo.legalPersonCardNo || '--' }}</div>
        </div>
        <div class="flex_sb_cen">
          <div class="form_name">证件有效期：</div>
          <div class="form_text">{{ holdMainBodyInfo.idValidity || '--' }}</div>
        </div>
        <div class="flex_sb_start">
          <div class="form_name">证件照片：</div>
          <div class="right_images">
            <Image :name="holdMainBodyInfo.legalPersonCardImgBack" :styles="{marginBottom: '28rpx', marginLeft: '10rpx'}" overspread size="80" />
            <Image :name="holdMainBodyInfo.legalPersonCardImgFront" :styles="{marginBottom: '28rpx', marginLeft: '10rpx'}" overspread size="80" />
          </div>
        </div>
      </div>
    </div>
    <div class="form_list_has_title">
      <div class="form_part">
        <div class="form_title">银行信息</div>
        <div class="flex_sb_start">
          <div class="form_name">银行账户名：</div>
          <div class="form_text">
            {{ holdMainBodyInfo.payee || '--' }}
          </div>
        </div>
        <div class="flex_sb_cen">
          <div class="form_name">银行账号：</div>
          <div class="form_text">
            {{ holdMainBodyType === 0 ? (holdMainBodyInfo.bankCardNo || '--') : (holdMainBodyInfo.bankAccount || '--') }}
          </div>
        </div>
        <div class="flex_sb_cen">
          <div class="form_name">开户行：</div>
          <div class="form_text align_center">
            {{ holdMainBodyType === 0 ? (holdMainBodyInfo.bankName || '--') : holdMainBodyInfo.openBank || '--' }}
          </div>
        </div>
        <div class="flex_sb_cen">
          <div class="form_name">银行预留手机号：</div>
          <div class="form_text">
            {{ holdMainBodyType === 0 ? (holdMainBodyInfo.bankCardMobile || '--') : (holdMainBodyInfo.reservedMobile || '--') }}
          </div>
        </div>
      </div>
      <!--  外部企业 -->
      <div v-if="holdMainBodyType === 1 && holdMainBodyInfo.isBind !== false" class="flex_end">
        <Button type="solid" @confirm="updateBankInfoFn">修改</Button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { bottomStaySpace, onLoad, onShow, Router } from '@U/common'
import { ref, computed, reactive } from 'vue'
import Image from '@C/Image.vue'
import Button from '@C/Button.vue'
import {
  getShouDaoStudioInfo,
  getExternalEnterprisesInfo,
 } from './request'

const cardType = computed(() => {
  if (holdMainBodyInfo.value.legalPersonCardType === 5001) return '身份证'
  if (holdMainBodyInfo.value.legalPersonCardType === 5002) return '港澳居民来往内地通行证（回乡证）'
  if (holdMainBodyInfo.value.legalPersonCardType === 5003) return '台湾居民来往大陆通行证（台胞证）'
})

const statusName = computed(() => {
  const status = holdMainBodyInfo.value.profileStatus
  const isBind = holdMainBodyInfo.value.isBind
  let statusObj = {}
  if (status === 1) statusObj = { text: '审核中', color: '#1890FF' }
  if (status === 2) statusObj = { text: '已通过', color: '#2DC76D' }
  if (status === 3) statusObj = { text: '已驳回', color: '#FF8002' }
  if (isBind === false) statusObj = { text: '已解绑', color: '#B9BBB9' }
  return statusObj
})

const holdMainBodyInfo = ref({})
// 获取收稻工作室信息
const getShouDaoStudioInfoFn = async (id: string) => {
  const { data, code } = await getShouDaoStudioInfo({ id }).finally(() => {})
  if (code === 200) holdMainBodyInfo.value = data
}

// 获取外部其他企业信息
const getExternalEnterprisesInfoFn = async (id: string) => {
  const { data, code } = await getExternalEnterprisesInfo({ id }).finally(() => {})
  if (code === 200) holdMainBodyInfo.value = data
}

const holdMainBodyType = ref(0) // 0 是工作室   1 是外部企业
const holdMainBodyAbout = reactive({
  holdMainBodyId: '',
})
// 初次打开页面：依次执行 onLoad -> onShow
onLoad((option: any) => {
  holdMainBodyAbout.holdMainBodyId = option.id
  holdMainBodyType.value = Number(option.type)
})
onShow(() => {
  if (holdMainBodyType.value === 0) getShouDaoStudioInfoFn(holdMainBodyAbout.holdMainBodyId)
  else getExternalEnterprisesInfoFn(holdMainBodyAbout.holdMainBodyId)
})
const updateBankInfoFn = () => {
  Router.push('new_add_bank_prove_material', { id: holdMainBodyAbout.holdMainBodyId, isUpdateBankCertificateMaterial: true })
}
</script>

<style lang="less" scoped>
.wrap {
  padding: 24rpx;
  .align_center {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
.right_images {
  display: flex;
  justify-content: flex-end;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 140rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
}
</style>
